/*
   学习目标：useEffect可以处理卸载时的钩子函数
  需求1： 在挂载时，监听window的窗口改变事件
  需求2： 在卸载时，取消监听的window窗口改变事件
*/
// 1. 先导入useEffect
import React, { useEffect, useState } from 'react'

export default function App() {
    // 准备组件的显示与隐藏
    const [isShow, setIsShow] = useState(true)
    
  return (
    <div>
       {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  )
}

function Child(){
    // 在子组件中挂载时监听窗口改变事件
    // 2 封装监听代码
    const resizeFn=()=>{
        console.log('123  ----->  ', 123);
    }
    // 1 挂载后，开启监听
    useEffect(() => {
     window.addEventListener('resize',resizeFn)
    }, [])
    // 3 卸载时清除监听事件
    useEffect(() => {
     // 🔔useEffect接收的回调函数中，返回一个函数，代表卸载是执行改函数
     return ()=>{
         console.log(' 我被卸载了 ----->  ', );
         window.removeEventListener('resize',resizeFn)
     }
    }, [])
    
    
    return <div>我是子组件</div>;
}
